const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
    setTitle: (title) => ipcRenderer.send('set-title', title),
    SerialPortList: (callback) => ipcRenderer.sendSync('SerialPort-list', callback),
    LinkSerialPort: (callback) => ipcRenderer.sendSync('link-SerialPort', callback),
    CloseSerialPort: (callback) => ipcRenderer.sendSync('close-SerialPort', callback),
    ReadSerialPort: (callback) => ipcRenderer.sendSync('read-SerialPort', callback),
    main: (option, data) => main(option, data)
})

//canvas
const THREE = require('three')
async function main(option, data) {
    // console.log(data)
    const canvas = document.getElementById('view-canvas');
    const renderer = new THREE.WebGLRenderer({antialias: true, canvas});

    let wheel_num = 0.01

    const fov = 45;
    const aspect = canvas.clientWidth / canvas.clientHeight
    const near = 0.1;
    const far = 10000;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 5;

    const scene = new THREE.Scene();

    let cube = undefined
    if (option == "test") {
        const boxWidth = 1;
        const boxHeight = 1;
        const boxDepth = 1;
        const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
        const material = new THREE.MeshPhongMaterial({color:0x44aa88, side: THREE.DoubleSide});
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
    } else if (option == "length") {
        wheel_num = data / 50
        const geometry = new THREE.CylinderGeometry(0.02, 0.02, data, 50);
        const material = new THREE.MeshPhongMaterial({color:0x44aa88, side: THREE.DoubleSide});
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
    } else if (option == "area") {
        console.log(data)
        wheel_num = data / 50
        camera.position.z = camera.position.z + (data * Math.PI)
        const geometry = new THREE.CircleGeometry(data, 50);
        const material = new THREE.MeshPhongMaterial({color:0x44aa88, side: THREE.DoubleSide});
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
    } else if (option == "volume") {
        // const length = data.measurement_points.length
        // const pointA = new THREE.Vector3(data.measurement_points[length - 4].x, data.measurement_points[length - 4].y, data.measurement_points[length - 4].z);
        // const pointB = new THREE.Vector3(data.measurement_points[length - 3].x, data.measurement_points[length - 3].y, data.measurement_points[length - 3].z);
        // const pointC = new THREE.Vector3(data.measurement_points[length - 2].x, data.measurement_points[length - 2].y, data.measurement_points[length - 2].z);
        // const pointD = new THREE.Vector3(data.measurement_points[length - 1].x, data.measurement_points[length - 1].y, data.measurement_points[length - 1].z);

        const len = data.len
        const width = data.width
        const height = data.height
        const max = Math.max(len, width, height);
        camera.position.z = camera.position.z + max;

        wheel_num = max / 50

        const boxWidth = len;
        const boxHeight = width;
        const boxDepth = height;
        const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth, 4, 4, 4);
        const material = new THREE.MeshPhongMaterial({color:0x44aa88, side: THREE.DoubleSide});
        cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
            
        cube.rotation.x = 0.5
        cube.rotation.y = 0.5
    }


    const color = 0xFFFFFF;
    const intensity = 3;
    const light = new THREE.DirectionalLight(color, intensity);
    light.position.set(-1, 0, 10);
    scene.add(light);

    // function render(time) {

    //     //修正和元素的宽高比
    //     const canvas = renderer.domElement;
    //     camera.aspect = canvas.clientWidth / canvas.clientHeight;
    //     camera.updateProjectionMatrix();
        
    //     renderer.render(scene, camera);
        
    //     requestAnimationFrame(render);
    // }
    // render();

    renderer.render(scene, camera);

    //鼠标事件
    let isDown = false
    let before_event = undefined
    canvas.addEventListener( 'mousedown', (event) => {
        isDown = true
        before_event = event
    })
    canvas.addEventListener( 'mousemove', (event) => {
        if(isDown == true){
            const x = event.clientX - before_event.clientX
            const y = event.clientY - before_event.clientY
            before_event = event
            // console.log(x, y)
            
            if ((-Math.PI/2) <= cube.rotation.x && cube.rotation.x <= (Math.PI/2)) {
                cube.rotation.x = cube.rotation.x + y / 100;
            } else if ((-Math.PI/2) >= cube.rotation.x && y > 0) {
                cube.rotation.x = cube.rotation.x + y / 100;
            } else if (cube.rotation.x >= (Math.PI/2) && y < 0) {
                cube.rotation.x = cube.rotation.x + y / 100;
            }
            cube.rotation.y = cube.rotation.y + x / 100;

            renderer.render(scene, camera);
        }
    })
    canvas.addEventListener( 'mouseup', (event) => {
        isDown = false
    })
    canvas.addEventListener('wheel', (event) => {
        if (event.deltaY > 0){
            camera.position.z = camera.position.z - wheel_num;
        }
        if (event.deltaY < 0){
            camera.position.z = camera.position.z + wheel_num;
        }
        renderer.render(scene, camera);
    })
}

// window.onload = async () => {
//   await main()
// };